<template>
  <el-form class="right-events">
    <el-button icon="Plus" type="primary" class="margin-left-right-16" @click.stop="onAddEvent">添加事件</el-button>
    <el-collapse v-model="activeEventNames" class="margin-top-10">
      <el-collapse-item v-for="(eventItem, index) in sortEvents" :name="'event-'+index" :key="'event-' + index + '-' + eventItem.type + '-' + componentData.id">
          <template #title>
          事件{{index+1}}<span class="select-animate" @click.stop="onShowSelectEvent($event, eventItem.type)">{{EVENT_HOVER_WEB_TYPES[eventItem.type].label}}</span>
          <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteEvent($event, eventItem)"></i>
          <el-icon class="el-collapse-item__arrow"  @click.stop="onMoveTop($event, eventItem)"><top /></el-icon>
        </template>
        <dropdown-normal v-if="eventItem.mouseBehavior" label="操作方式" :valLists="MOUSE_BEHAVIOR" v-model="eventItem.mouseBehavior" @change="onUpdateEvent($event, eventItem)"></dropdown-normal>
        <event-comp :item="eventItem" :index="index"></event-comp>
        <component :is="eventItem.eventComType" :event="eventItem" :index="index"></component>
      </el-collapse-item>
    </el-collapse>
    <div v-if="computeEventNum > 0 && eventAttr" class="margin-top-20">
      <el-divider content-position="center">结果属性</el-divider>
      <switch-normal v-model="eventAttr.isBreakResult" label="主事件结果中断" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="eventAttr.isBreak" label="主事件中断" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="eventAttr.isEmitLoadEvent" label="触发加载事件" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="eventAttr.isEmitInitEvent" label="触发初始化事件" @change="onChangeAttr"></switch-normal>
      <dropdown-normal label="结果类型" :valLists="EVENTS_RESULTS_TYPES" v-model="eventAttr.resultType" @change="onChangeAttr"></dropdown-normal>
      <template v-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.page">
        <dropdown-normal label="成功页面id" v-model="eventAttr.successPanelId" :valLists="pushPages()" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal label="失败页面id" v-model="eventAttr.failPanelId" :valLists="pushPages()" @change="onChangeAttr" ></dropdown-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </template>
      <template v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.pop">
        <dropdown-normal label="成功弹层id" v-model="eventAttr.successPanelId" :valLists="pushPops()" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal label="失败弹层id" v-model="eventAttr.failPanelId" :valLists="pushPops()" @change="onChangeAttr" ></dropdown-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </template>
      <template v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.component">
        <dropdown-normal label="关联事件" :valLists="getEventList" v-model="eventAttr.eventType" @change="onChangeAttr"></dropdown-normal>
        <input-normal label="成功组件id" v-model="eventAttr.successCompId" @change="onChangeAttr"></input-normal>
        <input-normal label="失败组件id" v-model="eventAttr.failCompId" @change="onChangeAttr"></input-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </template>
      <template v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.jump">
        <input-normal label="跳转链接" v-model="eventAttr.link" @change="onChangeAttr"></input-normal>
      </template>
      <div v-else class="margin-left-right-16 red">
        与后端通信后不提示任何信息
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import EventComp from '@/views/components/event-comp.vue'
import {  EVENTS_RESULTS_TYPES_MAP, COMPONENT_TYPES } from '@/const/'
import { MOUSE_BEHAVIOR, EVENTS_RESULTS_TYPES, EVENT_HOVER_WEB_TYPES } from '@/const/web/'
import { useWebComponentStore } from '@/store/web/component'
import { COMPONENT_IMG_DATAKEYS } from '@/const/web/'
import { getCompStyle, showAlert } from '@/components/utils/'
import { pushPages, pushPops } from '@/views/ts/'

const useWebComponent = useWebComponentStore()

const activeEventNames = ['event-0']
let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
const eventAttr = computed(() => {
  return useWebComponent.currentComponentData!.eventAttr
})
const getEventList = computed(() => {
  const lists: any[] = []
  const events = useWebComponent.currentComponentData!.events
  _.forEach(events, (event: IEvent) => {
    lists.push({ name: EVENT_HOVER_WEB_TYPES[event.type].label, value: event.type })
  })
  return lists
})
const sortEvents = computed(() => {
  const tempArr = _.sortBy(useWebComponent.currentComponentData!.events, (event: IEvent) => { return event.index })
  return tempArr
})

let eventNum = 0
const computeEventNum = computed(() => {
  _.forEach(useWebComponent.currentComponentData!.events, (event: IEvent) => {
    if(event.controlId && event.controlId.length > 0 ) {
      eventNum++
    }
  })
  return eventNum
})

const onAddEvent = () => {
  if(useWebComponent.currentComponentData!.cid == COMPONENT_TYPES.group_component) {
    showAlert("打组组件不能添加事件！！！")
    return
  }
  if(eventNum > 4) {
    showAlert("最多只能添加5个事件哦！！！")
  } else {
    useWebComponent.changeSelectEventPlane({ isActive: true, type: '' })
  }
}
const onDeleteEvent = (e: any, item: IEvent) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.deleteEvent({ type: item.type, controlId: item.controlId })
}
const onShowSelectEvent = (e: any, type: string) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.changeSelectEventPlane({ isActive: true, type })
}
const onMoveTop = (e: any, item: IEvent) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.changeEventIndex({ eventIndex: item.index })
}
const onUpdateEvent = (e: any, item: IEvent) => {
  useWebComponent.updateEvent({ type: item.type, event: item })
}
const onChangeAttr = () => {
  useWebComponent.updateCurrentComponentData({ eventAttr: useWebComponent.currentComponentData!.eventAttr })
}
</script>

<script lang="ts">
const components = {
  AddEventReposts: defineAsyncComponent(() => import('@/views/events/add-event-reposts.vue')),
  AddEventSubmit: defineAsyncComponent(() => import('@/views/events/add-event-submit.vue')),
  AddEventLink: defineAsyncComponent(() => import('@/views/events/add-event-link.vue')),
  AddEventFrontEvents: defineAsyncComponent(() => import('@/views/events/add-event-front-events.vue')),
  AddEventSaveImg: defineAsyncComponent(() => import('@/views/events/add-event-save-img.vue')),
  AddEventVote: defineAsyncComponent(() => import('@/views/events/add-event-vote.vue')),
  AddEventNumber: defineAsyncComponent(() => import('@/views/events/add-event-number.vue')),
  AddEventNumberDayExists: defineAsyncComponent(() => import('@/views/events/add-event-number-day-exists.vue')),
  AddEventPush: defineAsyncComponent(() => import('@/views/events/add-event-push.vue')),
  AddEventRepost: defineAsyncComponent(() => import('@/views/events/add-event-repost.vue')),
  AddEventMsg: defineAsyncComponent(() => import('@/views/events/add-event-msg.vue')),
  AddEventPraise: defineAsyncComponent(() => import('@/views/events/add-event-praise.vue')),
  AddEventUser: defineAsyncComponent(() => import('@/views/events/add-event-user.vue')),
  AddEventFollow: defineAsyncComponent(() => import('@/views/events/add-event-follow.vue')),
  AddEventPacket: defineAsyncComponent(() => import('@/views/events/add-event-packet.vue')),
  AddEventLottery: defineAsyncComponent(() => import('@/views/events/add-event-lottery.vue')),
  AddEventRankFriend: defineAsyncComponent(() => import('@/views/events/add-event-rank-friend.vue')),
  AddEventJudgeRightWrong: defineAsyncComponent(() => import('@/views/events/add-event-judge-right-wrong.vue')),
  AddEventActivityInfo: defineAsyncComponent(() => import('@/views/events/add-event-activity-info.vue')),
  AddEventGeneral: defineAsyncComponent(() => import('@/views/events/add-event-general.vue')),
  AddEventGeneralNum: defineAsyncComponent(() => import('@/views/events/add-event-general-num.vue')),
  AddEventTimer: defineAsyncComponent(() => import('@/views/events/add-event-timer.vue')),
  AddEventRotate3d: defineAsyncComponent(() => import('@/views/events/add-event-rotate3d.vue')),
  AddEventInteractionData: defineAsyncComponent(() => import('@/views/events/add-event-interaction-data.vue')),
}
export default {
  components,
}
</script>
